<template>
	<view class="">
		<view class="top" v-if="bookList.length != 0">
			<u-alert :closable="closable" type="warning" :description="description"></u-alert>
		</view>
		<view class="book-list" v-if="bookList.length != 0">
			<view class="book" @touchstart="touchstart" @touchend="touchend" v-for="(item,i) in bookList" :key="i"
				@longtap="del(item.zlist.id)" @tap="Godetails">
				<view class="book-img">
					<image :src="tool.img(item.zlist.zhuimages[0])" mode=""></image>
				</view>
				<view class="book-name">
					{{ item.zlist.name }}
				</view>
				<view class="book-idcr">
					<text v-for="(items,index) in item.zlist.gui" :key="index">
						{{ items.name }}
						<text v-if="index != item.zlist.gui.length - 1">，</text>
					</text>
				</view>
				<view class="book-footer">
					<view class="book-price">
						<view class="new-price">
							<text>￥</text>
							<text>{{ item.zlist.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<view class="empty-img">
				<image src="../../static/emptys.png" mode=""></image>
			</view>
			<view class="empty-name">
				暂无收藏书籍
			</view>
		</view>
	</view>

</template>

<script>
	import tool from '../../utils/tool.js'
	export default {
		data() {
			return {
				tool: tool,
				page: 1,
				closable: true,
				description: '长按图片可取消收藏哦~',
				bookList: [],
				touchT: '',
				touchE: ''
			};
		},
		onLoad() {
			this.GetShowList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.GetShowList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page++
			this.GetShowList()
		},
		methods: {
			GetShowList() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('zpor/colList', {
					page: this.page
				}, (result) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.bookList = []
					}
					this.bookList = this.bookList.concat(result.data.data)
				})
			},
			Godetails() {
				if (this.touchE - this.touchT < 350) {
					uni.navigateTo({
						url: '/pages/book/index'
					})
				}
			},
			touchstart() {
				this.touchT = new Date().getTime();
			},
			touchend() {
				this.touchE = new Date().getTime();
			},
			del(id) {
				uni.showModal({
					title: '是否取消该收藏',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '正在加载'
							})
							this.$http.Post('zpor/coladd', {
								zlist_id: id
							}, (result) => {
								uni.hideLoading()
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
								this.GetShowList()
							})
						} else {

						}
					}
				})
			}
		}
	}
</script>

<style>
	.top {}

	.book-list {
		margin: 20rpx auto;
		width: 94%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.book {
		margin-bottom: 20rpx;
		width: 48%;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.book-img {
		width: 100%;
		height: 320rpx;
	}

	.book-img>image {
		border-radius: 16rpx;
		width: 100%;
		height: 100%;
	}

	.book-name {
		margin: 20rpx 0 10rpx 0;
		padding: 0rpx 10rpx;
		font-weight: bold;
		font-size: 28rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.book-idcr {
		padding: 0rpx 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.book-footer {
		margin: 10rpx 0;
		padding: 0rpx 10rpx;
		display: flex;
	}

	.book-price {
		width: 50%;
		height: 100%;
	}

	.book-cart {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.book-cart>image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.new-price {
		width: 100%;
		height: 50%;
	}

	.new-price>text:nth-child(1) {
		font-size: 24rpx;
		color: #ff5502;
		font-weight: bold;
	}

	.new-price>text:nth-child(2) {
		font-size: 28rpx;
		color: #ff5502;
		font-weight: bold;
	}

	.old-price {
		width: 100%;
		height: 50%;
		text-decoration: line-through #999;
		font-size: 28rpx;
	}

	.old-price>text:nth-child(1) {
		color: #999;
	}

	.old-price>text:nth-child(2) {
		color: #999;
	}

	.empty-img {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty-img>image {
		width: 450rpx;
		height: 500rpx;

	}

	.empty-name {
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>